<template>
    <ex-dialog width="600px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
      @closeDialog="handleClose">
      <div class="tips" v-if="pathType == 'confirm'">是否确认完成订单</div>
      <div class="tips" v-if="pathType == 'cancel'">是否确认取消订单</div>
      <div class="main" v-loading="loading" v-if="pathType == 'cancel'">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth" class="demo-ruleForm">
          <el-form-item label="备注：" prop="remark" >
            <el-input v-model="ruleForm.remark" placeholder="请填写备注" ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="button_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">确认</el-button>
      </div>
    </ex-dialog>
  </template>
  <script>
    import Loading from "@/components/Loading/index";
    // api
    import { cancelOrder,verifyOrder } from "@/api/merchants/exchangeOrder";
  
    export default {
      components: {
        Loading,
      },
      props: {
        visible: Boolean,
        id: String,
        pathType: String,
      },
      data() {
        return {
          labelWidth: '70px',
          inputWidth: '300px',
          title: '确认订单',
          loading: false,
          disabled: false,
          AgreeLoading: false, //按钮loading
          ruleForm: {
            id: '',
            remark: '',//备注
          },
          rules: {
            remark: [{
              required: false,
              message: "请填写备注",
              trigger: ['change', 'bulr'],
            }],
          },
        };
      },
      computed: {},
      created() {
        this.ruleForm.id = this.id
        if(this.pathType == 'confirm'){
          this.title = '确认订单'
        }else if(this.pathType == 'cancel'){
          this.title = '取消订单'
        }
      },
      mounted() {
  
      },
      methods: {
        //取消
        handleClose(formName) {
          this.$emit("update:visible", false);
        },
        submitForm(formName) {
          //创建确定
          this.AgreeLoading = true
          var params = {
            ...this.ruleForm
          };
          if(this.pathType == 'confirm'){
            verifyOrder(params).then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              setTimeout(() => {
                this.$emit('success')
                this.handleClose()
                this.AgreeLoading = false
              }, 1000);
            })
            .catch(() => {
              this.AgreeLoading = false;
            });
          }else if(this.pathType == 'cancel'){
            cancelOrder(params).then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
              setTimeout(() => {
                this.$emit('success')
                this.handleClose()
                this.AgreeLoading = false
              }, 1000);
            })
            .catch(() => {
              this.AgreeLoading = false;
            });
          }
        },
      },
    };
  
  </script>
  <style lang="scss" scoped>
    .ex-diolog {
      ::v-deep .ex--dialog--footer {
        border: none !important;
        padding: 0 !important;
      }
  
      ::v-deep .ex--dialog--main {
        padding: 10px 20px !important;
      }
    }
  
    .main {
      padding: 20px 20px;
    }
  
    .from_box {
      display: flex;
      margin-bottom: 20px;
    }
  
    .from_box_l {
      width: 110px;
      color: #606266;
      font-size: 14px;
      font-weight: bold;
    }
  
    .from_box_r {
      color: #333;
      font-size: 15px;
      flex: 1;
    }
  
    .el_table_box {
      padding: 0 20px 40px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      margin-bottom: 20px;
    }
  
    .el_table_box_h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #f3f3f3;
      margin-bottom: 14px;
    }
  
    .el_table_box_h_title {
      border-left: 4px solid #ff9300;
      padding-left: 4px;
    }
  
    .carousel_box {
      width: 400px;
      margin-bottom: 20px;
    }
  
    .swiper_img {
      width: 100%;
      height: 100%;
    }
  
    .carousel_box_two {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  
    .phone_box {
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
    }
  
    .button_box {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
    }
  
    ::v-deep .avatar-uploader2 .el-upload {
      width: 100% !important;
    }
  
    .avatar-uploader2 {
      width: 228px;
      height: 128px;
      text-align: center;
      line-height: 128px;
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
    }
  
    .banner_img {
      width: 228px;
      height: 128px;
    }
  
    .richText {
      border: 1px solid #ccc;
      line-height: normal;
    }
    .tips{
      width: 100%;
      text-align: center;
      font-size: 20px;
      color: #222;
      font-weight: 600;
    }
  </style>
  